import "../css/Travel.css";
import React, { useState } from 'react';
import { NavBar} from "@nutui/nutui-react";
import { Share, ArrowLeft } from "@nutui/icons-react";
import { useNavigate, useLocation } from "react-router-dom";
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { Flex, message, Upload } from 'antd';
import { Input } from 'antd';
const { TextArea } = Input;



const getBase64 = (img, callback) => {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
};
const beforeUpload = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
};

export default function Looklist() {
  const navigate = useNavigate();
  const location = useLocation();
  const Toast = () => {
    navigate("/shou/travel");
  };

  const [value, setValue] = useState('11111');


  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState();
  const handleChange = (info) => {
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, (url) => {
        setLoading(false);
        setImageUrl(url);
      });
    }
  };
  const uploadButton = (
    <button
      style={{
        border: 0,
        background: 'none',
      }}
      type="button"
    >
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div
        style={{
          marginTop: 8,
        }}
      >
        Upload
      </div>
    </button>
  );


  //装备
  const [addlist,setAddlist] = useState({
    zhuangbei:JSON.parse(localStorage.getItem('zhuangbei'))?JSON.parse(localStorage.getItem('zhuangbei')):'',
    gongju:JSON.parse(localStorage.getItem('gongju'))?JSON.parse(localStorage.getItem('gongju')):'',
  })

  const handleTextZB =(e)=>{
    setAddlist({...addlist,zhuangbei:e.target.value})
  }
  const handleTextGJ =(e)=>{
    setAddlist({...addlist,gongju:e.target.value})

    
  }


  return (
    <div>
      <NavBar
        back={
          <>
            <ArrowLeft />
          </>
        }
        right={
          <span className="flex-center" onClick={(e) => Toast.show("icon")}>
            <Share />
          </span>
        }
        onBackClick={() => Toast("/shou/travel")}
      ></NavBar>
      <div className="listbox_samll">
        <div className="listbox_header">
          <h3>{location.state.name}</h3>
          <div className="listbox_hander_samll">
            <span>地点：{location.state.city}</span>
            <span style={{marginLeft:'20px'}}>时间：{location.state.startDate}</span>~
            <span>{location.state.endDate}</span>
          </div>
          <div className="listbox_text">
            <span>备注信息:{location.state.description}</span>
          </div>
        </div>
      </div>

      <div
        style={{
          margin: '24px 0',
        }}
      />
      <div>
        <h2>前置准备</h2>
      </div>
      <h2>出行工具备注</h2>
      <TextArea
        placeholder="添加您的出行备注，如填写出行时间、到达站点时间等"
        autoSize={{
          minRows: 2,
          maxRows: 6,
        }}
        value={addlist.gongju}
        onChange={handleTextGJ}
        onBlur={()=>localStorage.setItem('gongju',JSON.stringify(addlist.gongju))}
      />
      <h2>旅行装备</h2>
      <TextArea
        placeholder="添加您的旅行装备，如：充电宝、雨伞、身份证等"
        autoSize={{
          minRows: 2,
          maxRows: 6,
        }}
        value={addlist.zhuangbei}
        onChange={handleTextZB}
        onBlur={()=>localStorage.setItem('zhuangbei',JSON.stringify(addlist.zhuangbei))}
      />
      <h2>图片备注</h2>
      <Upload
        name="avatar"
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        action="http://127.0.0.1:3000/imgurl"
        // beforeUpload={beforeUpload}
        // onChange={handleChange}
      >
        {imageUrl ? (
          <img
            src={imageUrl}
            alt="avatar"
            style={{
              width: '100%',
            }}
          />
        ) : (
          uploadButton
        )}
      </Upload>
    </div>
  );
}
